<template>
	<div class='about'>
		<div id="mapBox">

		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {

			}
		},
		mounted() {
			this.map = new this.gdmap.Map("mapBox", {
				zoom: 18, //3-18
				center: [116.397428, 39.90923],
				viewMode: '3D',
				pitch: 85,
				lang: 'zh_cn',
				mapStyle: 'amap://styles/fresh'
			})

			let trafficLayer = new this.gdmap.TileLayer.Traffic({
				zIndex: 10
			});

			let marker = new this.gdmap.Marker({
				/*
				assets   =>  require('../assets/logo.png')
				public  =>  /headPic.jpg
				 https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png  
					icon: '/headPic.jpg',
				*/
				content: '<img src="/headPic.jpg" class="hp"/><span class="text">我在这</span>',
				position: [116.405467, 39.907761]
			});

			this.map.add(trafficLayer);
			this.map.add(marker);
			this.map.setFitView();


			/*
			
			this.map.setFeatures(['road', 'bg', 'building']);       
		    this.map.setZoomAndCenter(14, [116.205467, 39.907761]);  
			
			*/
		}
	}
</script>
<style lang='scss'>
	#mapBox {
		width: 100%;
		height: 400px;

		.hp {
			width: 30px;
			height: 30px;
			border-radius: 50%;
		}

		.text {
			width: 100px;
			display: block;
		}
	}
</style>
